{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/toastr.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/imgareaselect-default.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/profile.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename= 'js/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/qrcode.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/toastr.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/jquery.imgareaselect.pack.js') }}"></script>
{% endblock %}

{% block title %}资料详情{% endblock %}

{% block navbar %}
    <div id="navigationbar">{{ super() }}</div>

{% endblock %}

{% block content %}
    <div id="first-layer">
            <div class="container">
                <img id="profile-bg" src="/static/images/profile-bg.png">
            </div>
    </div>
    <div id="second-layer">
{#        <div class="row">#}

            <div class="container-fluid" style="text-align: right">
                <button id="edit" class="" type="button"
                        onclick=window.location.href="{{ url_for('auth.setting') }}">编辑
                </button>
            </div>

            <div class="container-fluid" style="text-align: center;align-content: center;">

                {% if developer.avatar %}
                    <img id="dev-avatar" src="/static/user/images/{{ developer.avatar }}">
                {% else %}
                    <img id="dev-avatar" src="/static/images/jiguang-bear.png">
                {% endif %}
                <p id="display-name" class="jbox-font">{{ developer.username }}</p>
                {% if developer.description %}
                    <p id="dev-desc">{{ developer.description }}</p>
                {% else %}
                    <p id="dev-desc">这个人很懒, 什么都没留下</p>
                {% endif %}
                <div id="dev-qrcode"></div>
                <p id="qrcode-desc" class="jbox-font">扫一扫订阅所有 channel</p>
            </div>
{#        </div>#}
    </div>

    <div class="container-fluid">
        <p id="channel-title" class="jbox-font">频道列表</p>
    </div>
    <div class="container-fluid">
        <p id="desc" class="jbox-font">扫一扫订阅指定频道</p>
    </div>
    <div class="container-fluid">
        <div class="row">
            <table id="channel-table" align="center">
                <tbody></tbody>
            </table>
        </div>
    </div>

    {% block footer %}
        <div id="footer">
            {{ super() }}
        </div>
    {% endblock %}

    <script type="text/javascript">
        var qrcode = new QRCode(document.getElementById("dev-qrcode"), {
            width: 201,
            height: 201
        });

        $(document).ready(function () {
            qrcode.makeCode("{{ developer.dev_key }}");
            createTable();
        });
        var list = [];
        {% for channel in developer.channels %}
            list.push("{{ channel.channel }}");
            console.log("{{ channel.channel }}");
        {% endfor %}

        function createTable() {
            var table = $('#channel-table');
            var count = list.length;
            if (count != 0) {
                var row = count / 3 + 1;
                for (var i = 1; i <= row; i++) {
                    var tr = $('<tr></tr>');
                    tr.appendTo(table);
                    var id;
                    for (var j = 1; j <= 3 && j + (i - 1)*3 <= count; j++) {
                        id = (i - 1) * 3 + j - 1;
                        var td = $('<td ><a href="/auth/send_to_channel/' + list[id] +'"><div class="channel-td"><div id="channel' + id + '">' +
                                '</div><p class="channel-title">' + list[id] + '</p></div></td></a>');
                        console.log(list[id]);
                        console.log(id);
                        td.appendTo(tr);
                    }
                }
            }
            if (list != undefined) {
                var qrcode;
                for (i = 0; i < list.length; i++) {
                    qrcode = new QRCode(document.getElementById("channel" + i), {
                        width: 201,
                        height: 201
                    });
                    qrcode.makeCode("{{ developer.dev_key }}" + "_" + list[i]);
                }
            }
        }

    </script>
{% endblock %}




{#$('#create_integration_btn').click(function () {#}
{#var channel = $('#selected_channel').val();#}
{#console.log('create integration, channel: ' + channel);#}
{#if (channel != '') {#}
{#{% if github %}#}
{#    window.location.href = '/auth/github/create/' + channel;#}
{#{% else %}#}
{#    var data;#}
{#    {% if discourse %}#}
{#        data = JSON.stringify({channel: channel, discourse: true});#}
{#    {% else %}#}
{#        data = JSON.stringify({channel: channel});#}
{#    {% endif %}#}
{#    $.ajax({#}
{#    type: "POST",#}
{#    contentType: "application/json; charset=utf-8",#}
{#    url: "/v1/developers/{{ dev_key }}/integrations",#}
{#    data: data,#}
{#    success: function (data) {#}
{#    if (data != undefined) {#}
{#    if (data["token"]) {#}
{#    window.location.href = '/auth/manage/create_integration/' + data["integration_id"] + '/' + data["token"] + '/' +#}
{#    channel#}
{#    }#}
{#    } else {#}
{#    toastr.error("服务器异常");#}
{#    }#}
{#    },#}
{#    error: function (error) {#}
{#    console.log(error);#}
{#    toastr.error("创建失败");#}
{#    },#}
{#    dataType: "json"#}
{#    });#}
{#{% endif %}#}
{#}#}
{#        })#}

